<template>
    <div class="searchChildRouterPage">

        <order-box :data="article" @changeData="changeSort"></order-box>

        <article-box :data="videoList"></article-box>

        <div class="paging" v-if="numPages">
            <pagin-tion :total="numPages" @changeIndex="changePage"></pagin-tion>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { onBeforeMount,ref } from 'vue'
import { get } from '@/http/axios'
import { articleBox,getDiffTypeData,paginTion,orderBox } from '../layout/index'
import { articleArderCity,articleRound } from '@/JSON/searchOrder.js'
import { change_query } from '../type'
import { useRouter } from 'vue-router'
import { baseRouteGetStatus,changeNowRoute } from '@/router/changeUrl'

interface Props{
    keyword:string
}
const props = defineProps<Props>()
const router = useRouter()
let videoList = ref()
const article = ref([articleRound,articleArderCity])
const map = new Map()
let numPages = ref<number | null>()

onBeforeMount(() => {
    baseRouteGetStatus(router,map)
    let obj = changeNowRoute(router,map)
    initData(obj)
})
function initData(other?:change_query){
    getDiffTypeData('article',props.keyword,other).then(res => {
        console.log('article',res)
        if (!numPages.value){
            numPages.value = res.data.numPages
        }
        return getResultIds(res.data.result)
    }).catch(res => {
        alert('video数据加载失败啦')
    })
}
/**
 * 
 * @param arr 处理的数据
 * 参数ids 是arr中所有id集合字符串 
 * ids转为字符串后获得数据 此中含有uname
 */
function getResultIds(arr:Array<any>) {
    let ids = [] as Array<any>
    arr.forEach(el => {
        ids.push(el.id)
    })
    get('/x/article/metas?ids=' + ids.toString()).then(res => {
        return dataAddAuther(arr,res.data)
    })
}
/**
 * 
 * @param arr 处理的数据
 * @param sourceArr 需要的数据来源
 * arr中数据缺少字段 uname sourceArr中虽然有内容 但是数据顺序难处理 因此 此函数将source中的uname字符赋给arr
 */
function dataAddAuther(arr:Array<any>,sourceArr:Array<any>){
    arr.forEach(el => {
        el.uname = sourceArr[el.id].author.name
    })
    console.log('专栏数据',arr);
    videoList.value = arr
}

function changePage(val:number){
    if (val === 1) map.delete('page')
    else map.set('page',val)

    const obj = changeNowRoute(router,map)
    return initData(obj)
}
/**
 * 
 * @param title query中的key
 * @param label query中的value
 * 
 */
function changeSort(title:string,label:string){
    numPages.value = null
    map.set(title,label)
    map.delete('page')
    const obj = changeNowRoute(router,map)
    return initData(obj)
}
</script>

<style lang="scss" scoped>
@import url(../../../assets/css/publicNodeStyle.scss);
</style>